<template>
  <div>
    <!-- <van-button type="primary" @click="show = true">点击购买</van-button> -->
    <!-- 点击让规格展示    show为true就显示   show为false  隐藏 -->
    <div class="goBack absolute z1 t10 l10" @click="goBack">
      <van-icon name="arrow-left" color="#fff" size="15"/>
    </div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in detail.banner" :key="index">
        <img width="100%" :src="item"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 商品的信息 -->
    <div class="p15">
      <p class="price color-main fw600 fs26">
        <span class="fs14 vt">￥</span>
        {{detail.price}}
      </p>
      <p class="fw600 fs18 mt5">{{detail.title}}</p>
    </div>

    <!-- 横向滚动 -->
    <div class="horizontal-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in scrollList" :key="index">
          <!-- 滚动的实际内容 -->
            <img width="16" :src="item.img"/>
            <p class="fs13">{{item.text}}</p>
            <p class="fs12 over-1">{{item.desc}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品的规格选择 -->
    <div class="sku">
      <van-cell @click="show = true" title="规格" is-link :value="selectedValue" />
    </div>

    <div class="p15">、
      <h4 class="mb5">商品详情</h4>
      <div v-html="detail.detail">
        
      </div>
    </div>
    <!--  sku  规格 信息 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="$route.query.id"
      :hide-stock="sku.hide_stock"
      @buy-clicked="buy"
      @add-cart="onAddCartClicked"
      ref="sku"
    />
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="buy"
      />
    </van-goods-action>
  </div>
</template>
<!-- 
  设计规格
  颜色 尺码 两个分类
  颜色S1： 红色 1 蓝色2
  尺码S2： S1 M2

  组合方式： 
    红色S   S1 1   S2 1
    红色M   S1 1   S2 2
    蓝色S   S1 2   S2 1 
    蓝色M   S1 2   S2 2

 -->

<!-- 在这个界面获取 传递过来的id -->
<script>
import axios from 'axios'
 import BScroll from '@better-scroll/core'
export default {
  data () {
    return {
      x: '<p>xxxxxxxx</p>',
      show:false,
      sku:  {},
      goods: {
        // 默认商品 sku 缩略图
        picture: ''
      },
      goodsId: '1',
      detail: {},
      bs: null,
      scrollList: [
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: 'CPU',
          desc: '骁龙8 Gen 1'
        },
        {
          img: require('./../assets/scroll-img.png'),
          text: '三摄像头',
          desc: '6400万像素+3个摄像头'
        }
      ],
      selectedValue: '请选择规格'
    }
  },
  methods: {
    goBack () {
      this.$router.back()
    },
    buy () {
      if (localStorage.getItem('phone')) {
        if(this.$refs.sku.getSkuData().selectedSkuComb == null) {
          this.$toast('还没选择商品规格')
        }else{
          this.selectedValueChange()
          // 在这里需要获取到商品的价格 商品的数量 商品的主图
          var obj = {
            mainImage: this.detail.mainImage,
            goodsNum: this.$refs.sku.getSkuData().selectedNum,
            goodsPrice: this.$refs.sku.getSkuData().selectedSkuComb.price,
            selectedValue: this.selectedValue
          }
          localStorage.setItem('goodsData', JSON.stringify(obj))
          localStorage.setItem('orderData', JSON.stringify(this.$refs.sku.getSkuData()))
          this.$router.push('/confirmOrder')
        }
      }else{
        this.$toast({
          message: '您还没有登录哦',
          onClose: ()=>{
            localStorage.setItem('fromPath', this.$route.fullPath)
            this.$router.push('/login')
          }
        });
      }
      
    },
    onAddCartClicked () {
      console.log('加入购物车');
    },
    getData () {
      axios.get('/api/detail?id=' + this.$route.query.id).then(data => {
        this.detail = data.data.data  // 将后台获取到的数据  赋值给对象detail
        this.goods.picture = this.detail.mainImage
        this.$set(this.sku,'tree',this.detail.sku.tree)
        this.$set(this.sku,'list',this.detail.sku.list)
        this.$set(this.sku,'price',this.detail.price)
        this.$set(this.sku,'stock_num', 200)
      })
    },
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 0
      })
    },
    selectedValueChange () {
        let num =  this.$refs.sku.getSkuData().selectedNum  // 选中的数量
        let data = this.$refs.sku.getSkuData().selectedSkuComb // 选中的规格
        this.selectedValue = this.detail.title
        data && this.sku.tree.forEach(item => {
          item.v.forEach(elem => {
            if (data[item.k_s] === elem.id) {
              this.selectedValue = this.selectedValue + ' ' + elem.name
            }
          })
        })
        this.selectedValue = this.selectedValue + ' x' + num
    }
  },
  watch: {
    show (newVal) {
      if (newVal === false) {  // 当面板隐藏
        this.selectedValueChange()
      }
    }
  },
  mounted () {
    this.getData()
    this.init()
  },
  beforeDestroy() {
    this.bs.destroy()
  }
}
</script>

<style>
 .sku .van-cell__value{
  flex: 4;
  text-align: left;
 }
</style>
<style scoped>
.horizontal-container .scroll-wrapper{
  position:relative;
  white-space: nowrap;
  border-top: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
}
.scroll-content{
  display: inline-block;
}
.scroll-item{
  display: inline-block;
  text-align: center;
  padding: 20px 5px;
  width: 82px;
  }
.goBack{
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 30px;
}
</style>